Auth0アプリのAuthorization URLを簡単に構成できるスニペットが地味に便利

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、認証基盤サービスAuth0のApplicationのAuthorization URLを簡単に構成できるスニペットが地味に便利だったので紹介します。

どんな機能？

そのスニペットというのは、下記のAuth0のドキュメントの「Authorization URL example」の部分です。

• Authorization URL example | Add Login Using the Authorization Code Flow

Auth0アカウントに未ログインの場合は[LOG IN]をクリック。

使用したいアカウントでAuth0テナントにログイン。

ログイン後にもとのページにリダイレクトされると、先程のスニペットで選択メニューが表示されています。

メニューを開くと、Auth0テナント上に作成されているアプリ一覧が選択できるようになっています。

一覧からアプリを選択すると、スニペット上のAuthorization URLのclient_idとredirect_uriがそのアプリの値で構成されます。

構成されたAuthorization URLにアクセスするとログイン画面が開くので、ログインします。

ログインが成功すると、redirect_uriにリダイレクトされます。便利！

そもそもAuthorization URLってなに？

Auth0では、Webアプリケーションへのログイン機能の実装はAuthorization Code Flowを使用して行います。

• Authorization Code Flow

Authorization Code Flowの動作は次のようになります。 Authorization Code Flowより引用

このAuthorization Code Flowを実行できるAuthorization URLを次のようにアプリケーションに組み込むことにより、ログイン機能を実装できます。

<a href="https://<DOMAIN>.jp.auth0.com/authorize?
  response_type=code&
  client_id=<CLIENT_ID>&
  redirect_uri=<REDIRECT_URI>&
  scope=openid%20profile&
  state=xyzABC123">
  Sign In
</a>

そして今回紹介したスニペットを使うことにより、このAuthorization URLを使用したAuthorization Code Flowの動作確認が簡単にできるようになります。

テナントの切り替え

ちなみに使用したいAuth0テナントの切り替えはドキュメントの右上から可能です。

おわりに

Auth0アプリのAuthorization URLを簡単に構成できるスニペットが地味に便利だったのでご紹介しました。

今までAuth0アプリのログイン部分の動作確認をしたい時にはAuthorization URLをわざわざテキストエディターで組み立てていたのが、これからはこのページを開いてさっと構成できますね。

以上